<template>
  <div class="w-full">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="searchUser" placeholder="请输入用户名" clearable></el-input>
      </el-col>
      <el-col :span="6">
        <el-select v-model="searchRole" placeholder="请选择角色" clearable>
          <el-option label="新闻管理员" value="news_admin"></el-option>
          <el-option label="信息管理员" value="info_admin"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
    </el-row>

    <el-table border class="" :data="filteredUsers" style="margin-top: 20px">
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="role" label="用户角色">
        <template #default="{ row }">
          <el-select v-model="row.role" placeholder="请选择用户角色" clearable>
            <el-option label="新闻管理员" value="news_admin"></el-option>
            <el-option label="信息管理员" value="info_admin"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="是否禁用">
        <template #default="{ row }">
          <el-switch v-model="row.disabled"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑用户的弹窗 -->
    <el-dialog v-model:visible="editDialogVisible" title="编辑用户">
      <el-form :model="editUser" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="editUser.username"></el-input>
        </el-form-item>
        <el-form-item label="用户角色">
          <el-select v-model="editUser.role" placeholder="请选择用户角色" clearable>
            <el-option label="新闻管理员" value="news_admin"></el-option>
            <el-option label="信息管理员" value="info_admin"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否禁用">
          <el-switch v-model="editUser.disabled"></el-switch>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'

// 模拟用户数据
const users = ref([
  { id: 1, username: '张三', role: 'news_admin', disabled: false },
  { id: 2, username: '李四', role: 'info_admin', disabled: true },
  { id: 3, username: '王五', role: 'news_admin', disabled: false }
])

const searchUser = ref('')
const searchRole = ref('')
const editDialogVisible = ref(false)
const editUser = reactive<{ username: any; role: any; disabled: any }>({
  username: undefined,
  role: undefined,
  disabled: undefined
})

// 根据搜索条件过滤用户列表
const filteredUsers = computed(() => {
  let filtered = users.value
  if (searchUser.value.trim() !== '') {
    filtered = filtered.filter((user) => user.username.includes(searchUser.value.trim()))
  }
  if (searchRole.value !== '') {
    filtered = filtered.filter((user) => user.role === searchRole.value)
  }
  return filtered
})

// 处理搜索按钮点击事件
const handleSearch = () => {
  // 执行搜索逻辑
}

// 处理编辑按钮点击事件
const handleEdit = (user: { username: any; role: any; disabled: any }) => {
  editUser.username = user.username
  editUser.role = user.role
  editUser.disabled = user.disabled
  editDialogVisible.value = true
}

// 保存编辑内容
const saveEdit = () => {
  // 执行保存逻辑
  editDialogVisible.value = false
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
